<template>
	<div id="lessonTable" class="lessonTable">
		<group class="lessonTableGroup">
			<tab :line-width=2 active-color='#fc378c' v-model="index">
				<x-button mini @click.native="goPre" style="width: 200px"> 《 </x-button>
				<tab-item class="vux-center" :selected="demo2 === item" v-for="(item, index) in list2" @click="demo2 = item" :key="index">{{item}}</tab-item>
				<x-button mini @click.native="goNext" style="width: 200px"> 》 </x-button>
			</tab>
			<div class="tab-swiper aiCellClass">
				<group class="aiGroupClass">
					<cell title="09:00~10:00"><span v-html="userList[0]"></span></cell>
					<cell title="10:00~11:00"><span v-html="userList[1]"></span></cell>
					<cell title="11:00~12:00"><span v-html="userList[2]"></span></cell>
					<cell title="15:00~16:00"><span v-html="userList[3]"></span></cell>
					<cell title="16:00~17:00"><span v-html="userList[4]"></span></cell>
					<cell title="17:00~18:00"><span v-html="userList[5]"></span></cell>
					<cell title="18:00~19:00"><span v-html="userList[6]"></span></cell>
					<cell title="19:00~20:00"><span v-html="userList[7]"></span></cell>
				</group>
			</div>
		</group>

	</div>
</template>

<script>
	import bus from '@/event/eventBus'
	import PickList from '../../../../components/mobile/picklist/picklist'
	import NetWorking from '../../../../utils/networking'
	import dateutils from '../../../../utils/date'
	import {Group, Cell, Tab, TabItem, Swiper, SwiperItem, XButton, PopupRadio} from 'vux'
	const list = () => ['一', '二', '三', '四', '五', '六', '日']
	export default {
		name: "lessonTable",
		components: {
			Group,
			Cell,
			Tab,
			TabItem,
			Swiper,
			SwiperItem,
			XButton,
			PopupRadio,
			PickList
		},
		data() {
			return {
				option: '所有人',
				options: ['哈哈','闹闹'],
				list2: list(),
				demo2: '',
				index: 0,
				itemList: [],
				userList: [],
				curDate: ''
			}
		},
		created: function () {
			bus.$emit("userDefinedEvent", 2)
			bus.$emit("barController", 1)

			this.curDate = new Date()
			if(this.curDate.getDay() == 0){
				//means sunday here
				this.index = 7
			}else{
				this.index = this.curDate.getDay()
			}
			this.getTeacherClassDetails()
		},
		watch: {
			index: function () {
				this.getTeacherClassDetails()
			},
			itemList: function () {
				this.userList = new Array("","","","","","","","")
				for(var i=0; i<this.itemList.length; i++){
					var t = dateutils.getCusTime(this.itemList[i].time)
					switch (t){
						case '09:00':
							this.userList[0] += '<a style="color:' + this.getRandomColor() + '">' + this.itemList[i].nickname + '(' + this.itemList[i].name + ')' + '</a><br>'
							//this.userList[0] += this.itemList[i].nickname + ' '
							break
						case '10:00':
							this.userList[1] += '<a style="color:' + this.getRandomColor() + '">' + this.itemList[i].nickname + '(' + this.itemList[i].name + ')' + '</a><br>'
							//this.userList[1] += this.itemList[i].nickname + ' '
							break
						case '11:00':
							this.userList[2] += '<a style="color:' + this.getRandomColor() + '">' + this.itemList[i].nickname + '(' + this.itemList[i].name + ')' + '</a><br>'
							//this.userList[2] += this.itemList[i].nickname + ' '
							break
						case '15:00':
							this.userList[3] += '<a style="color:' + this.getRandomColor() + '">' + this.itemList[i].nickname + '(' + this.itemList[i].name + ')' + '</a><br>'
							//this.userList[3] += this.itemList[i].nickname + ' '
							break
						case '16:00':
							this.userList[4] += '<a style="color:' + this.getRandomColor() + '">' + this.itemList[i].nickname + '(' + this.itemList[i].name + ')' + '</a><br>'
							//this.userList[4] += this.itemList[i].nickname + ' '
							break
						case '17:00':
							this.userList[5] += '<a style="color:' + this.getRandomColor() + '">' + this.itemList[i].nickname + '(' + this.itemList[i].name + ')' + '</a><br>'
							//this.userList[5] += this.itemList[i].nickname + ' '
							break
						case '18:00':
							this.userList[6] += '<a style="color:' + this.getRandomColor() + '">' + this.itemList[i].nickname + '(' + this.itemList[i].name + ')' + '</a><br>'
							//this.userList[6] += this.itemList[i].nickname + ' |'
							break
						case '19:00':
							this.userList[7] += '<a style="color:' + this.getRandomColor() + '">' + this.itemList[i].nickname + '(' + this.itemList[i].name + ')' + '</a><br>'
							//this.userList[6] += this.itemList[i].nickname + ' |'
							break
						default:
							break
					}
				}
			}
		},
		methods: {
			goPre: function () {
				this.curDate = dateutils.convertDateFromString(dateutils.getPreWeekDate(this.curDate))
				this.getTeacherClassDetails()
			},
			goCur: function () {
				this.curDate = new Date()
				this.getTeacherClassDetails()
			},
			goNext: function () {
				this.curDate = dateutils.convertDateFromString(dateutils.getNextWeekDate(this.curDate))
				this.getTeacherClassDetails()
			},
			getRandomColor: function () {
				let colorAngle = Math.floor(Math.random()*180 + 180)
				return 'hsla('+ colorAngle +',50%,50%,100)'
			},
			getTeacherClassDetails: function () {
				let _this = this
				this.curDate = dateutils.getDayOfWeek(this.index, this.curDate)
				this.dateRange = dateutils.getDate(dateutils.getMondayDateOfWeek(this.curDate)) + '~' + dateutils.getDate(dateutils.getSundayDateOfWeek(this.curDate))
				bus.$emit("setTopSimpleTitle", '课程表（' + this.dateRange + '）')
				let date = dateutils.getDate(this.curDate)
				NetWorking.doGet(
					'ai/getUserActListByDateWithRole',
					null,
					{
						params: {
							date: date,
							role: 'teacher'
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.itemList = rs.user_act_date_list
						}else{
							alert(rs.error_message)
						}
					}
				)
			}
		}
	}
</script>

<style lang="less">
	@import '../../../../../node_modules/vux/src/styles/1px.less';
	@import '../../../../../node_modules/vux/src/styles/center.less';

	.lessonTable {
		margin-top: 46px;
		margin-bottom: 100px;
	}

	.lessonTableGroup > .weui-cells__title {
		font-size: 20px;
		font-weight: bold;
	}

	.scrollable .vux-tab-item {
		flex: auto !important;
	}

	.lessonTableGroup > .weui-cells > .vux-tab-wrap > .vux-tab-container > .vux-tab > .vux-tab-ink-bar {
		background-color: white !important;
	}

	.tab-swiper {
		background-color: #fff;
	}

	.aiGroupClass > .weui-cells > .weui-cell{
		padding: 0px 15px !important;
	}

	.aiGroupClass > .weui-cells > .weui-cell > .weui-cell__ft {
		width: 60%;
		word-wrap: break-word;
		text-align: left;
		padding: 5px;
	}

	.aiGroupClass > .weui-cells {
		margin-top: 0!important;
		font-size: 14px;
	}

</style>